<template>
  <div>
    <n-card :content-style="{padding: '5px 5px 5px 5px'}">
      <n-form>
        <n-form-item label="是否启用">
          <n-checkbox v-model:checked="regionalPrompterForm.active">启用</n-checkbox>
        </n-form-item>
        <n-form-item label="生成模式">
          <n-radio-group v-model:value="regionalPrompterForm.calcMode">
            <n-radio value="Attention">
              Attention
            </n-radio>
            <n-radio value="Latent">
              Latent
            </n-radio>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="基础比率">
          <n-input v-model:value="regionalPrompterForm.basicRatios">
          </n-input>
        </n-form-item>

        <n-form-item :show-label="false">
          <n-checkbox v-model:checked="regionalPrompterForm.useBase">使用基础提示词 (Base Prompt)</n-checkbox>
          <n-checkbox v-model:checked="regionalPrompterForm.useCommon">使用常见提示词 (Common Prompt)</n-checkbox>
          <n-checkbox v-model:checked="regionalPrompterForm.useNegCommon">使用常见反面提示词 (Common Negative Prompt)
          </n-checkbox>
        </n-form-item>

        <n-tabs
            type='bar'
            animated
            placement="top"
            default-value="Matrix">
          <n-tab-pane name="Matrix" tab="Matrix" display-directive="show">
            <n-row>
              <n-col :span="12">
                <n-form-item label="分割方法">
                  <n-radio-group v-model:value="regionalPrompterForm.modelMatrix">
                    <n-radio value="Columns">
                      Columns
                    </n-radio>
                    <n-radio value="Rows">
                      Rows
                    </n-radio>
                    <n-radio value="Random">
                      Random
                    </n-radio>
                  </n-radio-group>
                </n-form-item>

              </n-col>
              <n-col :span="12">
                <n-form-item label="分割比例">
                  <n-input v-model:value="regionalPrompterForm.ratios"></n-input>
                </n-form-item>
              </n-col>
            </n-row>
            <n-row x-gap="4">
              <n-col :span="12">
                <n-grid x-gap="4" :cols="2">
                  <n-gi>
                    <n-input-number :default-value="512"></n-input-number>
                  </n-gi>
                  <n-gi>
                    <n-input-number :default-value="512"></n-input-number>
                  </n-gi>
                </n-grid>
                <n-button block @click="draw" style="margin-top:5px;"> 可视化并制作模板</n-button>
              </n-col>
              <n-col :span="12">
                <div style="width: 250px;height: 250px;">
                  <canvas ref="canvas" :width="250" :height="250"></canvas>
                </div>
              </n-col>
            </n-row>
            <n-form-item>
              <n-checkbox v-model:checked="regionalPrompterForm.flip"> flip "," and ";"</n-checkbox>
              <n-checkbox v-model:checked="regionalPrompterForm.notChangeAnd">不再将 "AND "转换为 "BREAK"</n-checkbox>
            </n-form-item>
            <n-grid x-gap="4" :cols="2">
              <n-gi>
                <n-form-item label="LoRA stop step">
                  <n-input v-model:value="regionalPrompterForm.loraStopStep"></n-input>
                </n-form-item>
              </n-gi>

              <n-gi>
                <n-form-item label="LoRA Hires stop step">
                  <n-input v-model:value="regionalPrompterForm.loraHiresStopStep"></n-input>
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="反向提示词中 LoRA 文本编码器权重">
                  <n-input v-model:value="regionalPrompterForm.loraTextencoder"></n-input>
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="反向提示词中 LoRA 的 U-net 权重">
                  <n-input v-model:value="regionalPrompterForm.loraUnet"></n-input>
                </n-form-item>
              </n-gi>
            </n-grid>

          </n-tab-pane>
        </n-tabs>
      </n-form>

    </n-card>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
// @ts-ignore
import fileFunction from "@/libs/globalFunction/file"

const modelList = ref([])
const canvas = ref(null)
const ctx = ref(null)

const props = defineProps({
  sdResourceId: {
    type: String,
    required: true
  }
})


const regionalPrompterForm: SD.SDRegionalPrompter = reactive({
  active: false,
  debug: false,
  model: "Matrix",
  modelMatrix: "Columns",
  modelMask: "Mask",
  modelPrompt: "Prompt",
  ratios: "1,1",
  basicRatios: "0.2",
  useBase: false,
  useCommon: true,
  useNegCommon: false,
  calcMode: "Attention",
  notChangeAnd: false,
  loraTextencoder: "0",
  loraUnet: "0",
  threshold: "0",
  mask: "",
  loraStopStep: "0",
  loraHiresStopStep: "0",
  flip: false
})


const draw = () => {
  ctx.value = canvas.value.getContext('2d')
  // 按照长宽比例1:2划分
  const w = 250
  const h = 250
  ctx.value.clearRect(0, 0, w, h)
  const ratioTxt = regionalPrompterForm.ratios
  const ratioArr = ratioTxt.split(';')
  const sum = ratioArr.reduce((total, cur) => {
    return total + Number(cur.split(",")[0])
  }, 0)
  let preHeight = 0
  for (let i = 0; i < ratioArr.length; i++) {
    const heightItem = ratioArr[i]
    // 计算高度
    const widthItems = heightItem.split(",")
    const height = h * Number(widthItems[0]) / sum
    if (widthItems.length > 1) {
      if (ratioArr.length == 1) {
        let preWidth = 0
        let sumWidth = widthItems.reduce((total, cur) => {
          return total + Number(cur.split(",")[0])
        }, 0)
        for (let ix = 0; ix < widthItems.length; ix++) {
          let width = Number(widthItems[ix]) / sumWidth * w
          ctx.value.fillStyle = randomRGBColor()
          ctx.value.fillRect(preWidth, preHeight, width, height)
          preWidth = preWidth + width
        }
      } else {
        let preWidth = 0
        let sumWidth = Number(widthItems[0])
        for (let ix = 1; ix < widthItems.length; ix++) {
          let width = Number(widthItems[ix]) / sumWidth * w
          ctx.value.fillStyle = randomRGBColor()
          ctx.value.fillRect(preWidth, preHeight, width, height)
          preWidth = preWidth + width
        }
      }
    } else {
      ctx.value.fillStyle = randomRGBColor()
      ctx.value.fillRect(0, preHeight, w, height)
    }
    preHeight = height
  }
}


function randomRGBColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

  return `rgb(${r}, ${g}, ${b})`;
}


const getScriptInfo = () => {
  return [
      regionalPrompterForm.active,
      regionalPrompterForm.debug,
      regionalPrompterForm.model,
      regionalPrompterForm.modelMatrix,
      regionalPrompterForm.modelMask,
      regionalPrompterForm.modelPrompt,
      regionalPrompterForm.ratios,
      regionalPrompterForm.basicRatios,
      regionalPrompterForm.useBase,
      regionalPrompterForm.useCommon,
      regionalPrompterForm.useNegCommon,
      regionalPrompterForm.calcMode,
      regionalPrompterForm.notChangeAnd,
      regionalPrompterForm.loraTextencoder,
      regionalPrompterForm.loraUnet,
      regionalPrompterForm.threshold,
      regionalPrompterForm.mask
  ]
}
defineExpose({
  getScriptInfo
})
</script>
